<template>
  <div class="content">
    <div class="workbench">
      <div class="worktop border_style bg_style">
        <div class="workinput">
          <div style="margin-right:8px">
            <YsInput type="text"  class="search-input" v-model="pege_param.query_keyword" @keydown.enter.native="getAppList" placeholder="请输入名称">
            </YsInput>
          </div>
          <div>
            <YsButton type="primary" class="searchBtn" @click="getAppList()">查询</YsButton>
          </div>
        </div>
      </div>
      <div class="table-box border_style bg_style">
        <proTable ref="proTableDom" class=" border01" :loading="page.tableLoad" :columns="page.columns" :data="page.data" @clickPage="onClickPage" :current="page.currentPage" :total="page.allTotal" :pageSize="page.pageSize"></proTable>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      pege_param: {
        service_name: "",
        sub_state_code: "DYZT_1002",
        start_recd: 0,//开始数据
        limit_recd: 10,//查询的条数
      },
      tableLoad: false,
      formTop: {
        input1: "",
        input2: "",
      },
      page: {
        tableLoad: false,
        pickerDisabled: null,//判断是编辑还是查看详情
        subDetailBean: {}, //查看详情
        allTotal: 0,
        pageSize: 10,
        currentPage: 1,

        columns: [
          {
            title: "编号",
            key: "sub_order_no",
          },
          {
            title: "租户名称",
            key: "company_name",
          },
          {
            title: "应用名称",
            key: "service_name",
          },
          {
            title: "更新时间",
            key: "sub_time",
          },
          {
            title: "操作",
            width: 200,
            // align: "center",
            render: (h, params) => {
              let _this = this
              return h("div", [
                h("YsButton", {

                  domProps: {
                    innerText: "开通"
                  },
                  props: {
                    size: "small",
                  },
                  on: {
                    click: (event) => {
                      _this.handleAppStateClick(1, params.row);
                      event.stopPropagation();
                    },
                  }
                }),
                h("YsButton", {
                  domProps: {
                    innerText: "拒绝"
                  },
                  style: {
                    margin: '0 0 0 6px'
                  },
                  props: {
                    size: "small",
                  },
                  on: {
                    click: (event) => {
                      _this.handleAppStateClick(0, params.row);
                      event.stopPropagation();
                    },
                  }
                }),

              ]);
            },
          },
        ],
        data: [],

      },
    };
  },

  methods: {
    ...mapActions(['getTableServiceSubPage', 'editSubOrderDetail']),
    //获取服务列表
    getAppList() {
      let _this = this
      this.page.tableLoad = true
      _this.getTableServiceSubPage(this.pege_param).then(res => {
        let { data, msg, scode, status } = res;
        _this.page.tableLoad = false
        if (status === 'ok') {
          this.page.data = data.service_sub_beans
          this.page.allTotal = data.all_recd
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch(err => {
        _this.page.tableLoad = false
        _this.$YsMessage.error('获取数据失败');
      })
    },
    //分页
    onClickPage(pageNum) {
      this.page.currentPage = pageNum;
      this.pege_param.start_recd = pageNum
      this.getAppList(this.pege_param)
    },


    //app订阅是否 通行
    handleAppStateClick(flag, row) {
      let _this = this
      _this.editSubOrderDetail({
        sub_code: row.sub_code,
        sub_order_no: row.sub_order_no,
        sub_state_code: flag ? "DYZT_1002" : "DYZT_1003",
      }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          _this.$YsMessage.success(data.message_text);
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch(err => {
        _this.$YsMessage.error('提交失败');
      })
    },

  },
  mounted() {
    this.getAppList()
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  // padding: 0 18px;
  /deep/ .workRooter {
    p {
      color: #405680;
      font-size: 16px !important;
    }
  }
  .workbench {
    width: 100%;
    height: calc(100% - 18px);
    // padding: 18px;
    padding-bottom: 0;

    .worktop {
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 72px;
      border: 1px solid #cfd7e5;
      border-radius: 4px;
      margin-bottom: 8px;

      .workright {
        margin-left: auto;
      }
      .workinput {
        display: flex;
      }
    }
    .dividing-right {
      .current {
        background: #0061ff !important;
        color: #fff !important;
      }
      margin-left: auto;
      .dividing-btn {
        width: 140px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #0061ff;
        opacity: 1;
        padding: 0;
        color: #0091ff;
        border-radius: 4px;
      }
      .dividing-btn2 {
        margin-left: 10px;
      }
    }
  }
  .table-box {
    width: 100%;
    height: calc(100% - 78px);
    border: 1px solid #cfd7e5;
    border-radius: 4px;
    overflow: hidden;
  }
}
.model-box {
  .icon-chain {
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    margin: 25px auto 0;

    background: rgba(0, 97, 255, 0.1);
    border: 1px solid #0061ff;
    opacity: 1;
    border-radius: 4px;
    .icon {
      font-size: 40px;
      color: #0061ff;
    }
  }
  .formconter {
    padding: 0 16px;
    /deep/.ivu-form-item {
      width: 100%;
    }
  }
}
/deep/.model-tabs {
  border: 1px solid #cfd7e5;
  border-radius: 2px;
  margin: 20px;
  .ivu-tabs-bar {
    background: #f5f7fa;
    border-bottom-color: transparent;
    margin-bottom: 22px;
  }
  .ivu-tabs-tabpane {
    background: transparent;
  }
  .ivu-input[disabled] {
    color: #405680;
  }
}
.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
}
</style>
